<template>
  <div>
    <div class="img-box" @click="galleryAppear">
      <img :src="this.bannerImg" alt="">
      <div class="space-info">
        <div class="space-name">{{this.sightName}}</div>
        <div class="img-number">
          <span class="iconfont iconfont-img">&#xe6de;</span>
          39
        </div>
      </div>
    </div> 
    <Gallery 
      v-show="showing" 
      @close="Disappear" 
      :list="gallaryImgs">
    </Gallery> 
    
  </div>
</template>
<script>
import Gallery from 'common/gallery'
export default {
  name: 'detailBanner',
  components: {
    Gallery,
  },
  data () {
    return {
      showing: false,
    }
  },
  props: {
    sightName: String,
    bannerImg: String,
    gallaryImgs: Array,
  },
  methods: {
    galleryAppear () {
      this.showing = true
    },
    Disappear () {
      this.showing = false
    }
  }
}
</script>
<style scoped>
  .img-box {/*用于装图片和 图片下部文字的外层盒子*/
    position: relative;
    overflow: hidden;
    height: 0;
    padding-bottom: 55%;
  }
  .img-box img {
    width: 100%;
  }
  .space-info {/*图片底部文字盒子*/
    position: absolute;
    display: flex;
    left: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    line-height: .6rem; 
    /*底部文字盒子背景渐变色效果*/
    background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)) 
  }
  .space-name {/*左侧文字*/
    flex: 1;
    font-size: .32rem;
    padding: 0 .2rem;
  }
  .img-number { /*右侧图片加文字盒子*/
    height: .32rem;
    line-height: .32rem;
    margin-top: .14rem;
    padding: 0 .4rem;
    border-radius: .2rem;
    background: rgba(0, 0, 0, .8);
    font-size: .24rem;
  }
  .iconfont-img {
    font-size: .24rem;
  }

</style>


